import React, { Component } from 'react'
import paramUtil from '@/utils/paramUtil'
import { Spin, message } from 'antd'
import InputWidget from '@/components/basicWidget/InputWidget'
import Button from '@/components/basicWidget/Button'
import formValidate from '@/service/validate/formValidate'
import './index.css'

class ParamCard extends Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            param: null,
            paramItem: {},
            formKey: new Date().getTime() + ''
        }
    }

    async componentDidMount() {
        let param = null
        if (this.props.code) {
            param = await paramUtil.get(this.props.code)
            await new Promise(resolve => this.setState({ param, paramItem: { parentId: param.id } }, resolve))
        }
        if (param) await new Promise(resolve => this.setState({ loading: false }, resolve))
    }

    //输入框变化获取值(通过value)
    onChange = (inputName) => {
        return async (value) => {
            const { paramItem } = this.state
            await new Promise((resolve) => {
                this.setState({ paramItem: { ...paramItem, [inputName]: value } }, resolve)
            })
        }
    }

    //重复校验
    validateExists = async (value) => {
        const { paramItem } = this.state
        const alreadyExists = (this.state.param.children || []).find(item => item.code === value && item.id !== paramItem.id)
        if (alreadyExists) {
            return false
        }
        return true
    }

    onDelete = async () => {
        const { paramItem } = this.state
        if (!paramItem.id) {
            message.warning('请选择要删除的参数项')
        }
    }

    onAdd = async () => {
        await new Promise(resolve => {
            this.setState({
                formKey: new Date().getTime() + '',
                paramItem: { parentId: this.state.param.id }
            }, resolve)
        })
    }

    onSave = async () => {
        const { paramNameInput, paramCodeInput } = this
        let refArray = [paramNameInput, paramCodeInput]
        const validateResult = await formValidate.validateForm(refArray)
        if (validateResult === false) return false
        const response = await paramUtil.saveParamItem(this.props.code, this.state.paramItem)
        if (response) {
            const param = await paramUtil.get(this.props.code)
            await new Promise(resolve =>
                this.setState({
                    param,
                    paramItem: response.data
                }, resolve)
            )
            message.success('保存成功')
        }
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div className='ParamCard-main'>
                <div className='ParamCard-main-left'>
                    {
                        (this.state.param.children || []).map(item => {
                            return (
                                <div
                                    key={item.id}
                                    className='ParamCard-main-left-item'
                                    onClick={async () => {
                                        await new Promise(resolve => {
                                            this.setState({
                                                formKey: new Date().getTime() + '',
                                                paramItem: item
                                            }, resolve)
                                        })
                                    }}
                                >
                                    <span>{item.content}</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='ParamCard-main-right' key={this.state.formKey}>
                    <InputWidget
                        prefixName={{ content: '标识' }}
                        value={this.state.paramItem.code}
                        onChange={this.onChange('code')}
                        rules={
                            [
                                {
                                    validate: formValidate.getValidater('isMust'),
                                    failMessage: '参数项标识不能为空'
                                },
                                {
                                    validate: this.validateExists,
                                    failMessage: '参数项标识已存在'
                                }
                            ]
                        }
                        ref={ref => { this.paramCodeInput = ref }}
                    ></InputWidget>
                    <InputWidget
                        prefixName={{ content: '内容' }}
                        value={this.state.paramItem.content}
                        onChange={this.onChange('content')}
                        rules={
                            [
                                {
                                    validate: formValidate.getValidater('isMust'),
                                    failMessage: '参数项内容不能为空'
                                }
                            ]
                        }
                        ref={ref => { this.paramNameInput = ref }}
                    ></InputWidget>
                    <InputWidget
                        prefixName={{ content: '描述' }}
                        value={this.state.paramItem.description}
                        onChange={this.onChange('description')}
                    ></InputWidget>
                    <InputWidget
                        prefixName={{ content: '排序' }}
                        value={this.state.paramItem.orderNum}
                        onChange={this.onChange('orderNum')}
                    ></InputWidget>
                    <div className='ParamCard-main-right-btn'>
                        <Button
                            onClick={this.onAdd}
                        >新增</Button>
                        <Button
                            onClick={this.onSave}
                        >保存</Button>
                        <Button
                            onClick={this.onDelete}
                        >删除</Button>
                    </div>
                </div>
            </div>
        )
    }
}

export default ParamCard
